<template>
    <div class="main-con editSystemUser">
        <!-- 顶部导航 -->
        <div class="breadcrumb-con">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index/messageManagement' }">消息推送</el-breadcrumb-item>
                <el-breadcrumb-item>{{ editText }}消息推送</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 表单信息 -->
        <div class="form-con">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                <h2 class="item-title">
                    消息推送信息
                </h2>
                <div class="form-item-con">
                    <el-form-item label="推送类型" prop="accountNo">
                        <el-radio-group v-model="ruleForm.msgType">
                            <el-radio :label="1">紧急订单</el-radio>
                            <el-radio :label="0">正常订单</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="消息标题" prop="userName">
                        <div class="form-item-input">
                            <el-input size="small" v-model="ruleForm.userName" placeholder="请输入消息标题"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="消息内容" prop="telPhone">
                        <div class="form-item-input">
                            <el-input size="small" type="textarea" v-model="ruleForm.telPhone" placeholder="请输入消息内容"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="推送渠道" prop="email">
                        <el-checkbox v-model="ruleForm.pushChannel" :true-label="1">APP端</el-checkbox>
                    </el-form-item>
                </div>
                <div class="submit-btn-con">
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <el-button @click="handleBack">取消</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import {
    queryAllRoleInfo,
    addSystemUserInfo,
    updateSystemUserInfo
} from "@/common/service/systemManagement/systemUser.js";
export default {
    name: "editSystemUser",
    data() {
        return {
            editType: "", //操作类型  add=添加  update=修改
            editText: "", //操作文字
            editId: "", //操作的id
            editData: "", //操作的数据
            //表单信息
            ruleForm: {
                accountNo: "",
                userName: "",
                password: "",
                telPhone: "",
                role: "",
                email: ""
            },
            rules: {
                accountNo: [
                    {
                        required: true,
                        message: "请输入登录账号",
                        trigger: "blur"
                    }
                ],
                userName: [
                    {
                        required: true,
                        message: "请输入用户名称",
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ],
                telPhone: [
                    {
                        required: true,
                        message: "请输入联系方式",
                        trigger: "blur"
                    }
                ],
                role: [
                    {
                        required: true,
                        message: "请选择角色",
                        trigger: "change"
                    }
                ],
                email: [
                    {
                        required: true,
                        message: "请输入邮箱",
                        trigger: "blur"
                    },
                    {
                        type: "email",
                        message: "邮箱格式不正确",
                        trigger: ["blur", "change"]
                    }
                ]
            },
            roleOptions: [] //角色下拉框数据
        };
    },
    created() {
        //初始化所有的角色
        this._queryAllRoleInfo();

        this.editType = this.$route.query.editType;
        this.editText = this.$route.query.editText;
        if (this.editType == "update") {
            this.editId = this.$route.query.editId;
            this.editData = JSON.parse(localStorage.getItem("editData"));
            this.ruleForm.id = this.editData.id;
            this.ruleForm.accountNo = this.editData.accountNo;
            this.ruleForm.userName = this.editData.userName;
            this.ruleForm.password = this.editData.password;
            this.ruleForm.telPhone = this.editData.telPhone;
            this.ruleForm.role = this.editData.role;
            this.ruleForm.email = this.editData.email;
        }
    },
    beforeDestroy() {
        //清除本地缓存的编辑数据
        localStorage.removeItem("editData");
    },
    methods: {
        /*-----------------------------查询操作-----------------------------*/
        //查询所有的角色信息
        _queryAllRoleInfo() {
            var data = {
                type: "1"
            };
            queryAllRoleInfo(data)
                .then(res => {
                    this.roleOptions = res;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------新增操作-----------------------------*/
        _addSystemUserInfo() {
            addSystemUserInfo(this.ruleForm)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "添加成功!"
                    });
                    this.handleBack();
                })
                .catchh(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------编辑操作-----------------------------*/
        _updateSystemUserInfo() {
            updateSystemUserInfo(this.ruleForm)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "编辑成功!"
                    });
                    this.handleBack();
                })
                .catchh(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------保存校验数据操作-----------------------------*/
        // 点击确定
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.editType == "add") {
                        this._addSystemUserInfo();
                    } else if (this.editType == "update") {
                        this._updateSystemUserInfo();
                    }
                } else {
                    return false;
                }
            });
        },

        /*-----------------------------返回操作-----------------------------*/
        handleBack() {
            this.$router.push({
                path: "/index/messageManagement"
            });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>